import React, { Component } from 'react';
import CaseStore, { CaseDataTable } from '../../stores/CaseStore';
import { RouterStore } from 'mobx-react-router';
import { inject, observer } from 'mobx-react';
import { NavBar, Icon } from 'antd-mobile';
import { Checkbox, Table } from 'antd';

const CheckBoxGroup = Checkbox.Group;

import './OverTime.scss';

interface OverProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const options = [
    { label: '签收超时', value: '1' },
    { label: '交办超时', value: '2' },
    { label: '退单超时', value: '3' },
    { label: '办结超时', value: '4' },
];



@inject('caseStore', 'routingStore')
@observer
export default class extends Component<OverProps> {
    componentWillMount() {
        const { caseStore } = this.props;
        caseStore.getOverTimeList([]);
    }
    render(): JSX.Element {
        const { caseStore, routingStore } = this.props;
        const title = caseStore.CaseListCategory;
        const overtimeColumns = [
            {
                dataIndex: 'title',
                key: 'title',
                render: (text: string, record: string, index: number) => {
                    if (index !== 0) {
                        return <div>{text}</div>;
                    }
                    return {
                        children: <div>{text}</div>,
                        props: {
                            colSpan: 0
                        }
                    };
                }
            },
            {
                dataIndex: 'info',
                key: 'info',
                render: (text: string, record: string, index: number) => {
                    if (index === 0) {
                        return {
                            children:
                            <div className="table-title"onClick={() => { routingStore.push('/case_list');}}>{text}</div>,
                            props: {
                                colSpan: 2
                            }
                        };
                    } else if (index === 2 || index === 3) {
                        return <span style={{ color: '#D9255E' }}>{text}</span>;
                    }
                    return <div>{text}</div>;
                }
            }
        ];
        return (
            <div className="overtime-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                    className="nav-over"
                >
                    <span className="list-title"> {title} </span>
                </NavBar>
                <div className="overtime-container">
                    <div className="overtime-type">
                        <div className="item-box">
                            <div className="check-title">超时类型:</div>
                            <CheckBoxGroup
                                options={options}
                                onChange={(values) => {
                                    let states: number[] = [];
                                    values.forEach((v: string, i: number) => {
                                        states.push(Number(v));
                                    });
                                    caseStore.getOverTimeList(states);
                                }}
                            />
                        </div>
                        <div className="item-box">
                            <div className="amount-title">工单总数：</div>
                            <div className="result">
                                <span className="figure">{caseStore.OvertimeList.length}</span>
                                个
                            </div>
                        </div>
                    </div>
                    <div className="overtime-table">
                        {
                            caseStore.OvertimeList.map((v: CaseDataTable[], i: number) => (
                                <div className="table-container">
                                    <Table
                                        columns={overtimeColumns}
                                        dataSource={v}
                                        bordered={true}
                                        pagination={false}
                                        showHeader={false}
                                    />
                                </div>

                            ))
                        }

                    </div>

                </div>

            </div >
        );
    }
}